<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_扩展运算符</title>
</head>

<body>
    <ul>
        <li>t</li>
        <li>b</li>
        <li>t</li>
        <li>m</li>
    </ul>
    <script>
        /*
         扩展运算符...
      作用:
         1. 伪数组转真数组
         2. 合并数组和合并对象
         3. 复制数组/复制对象  (可以不改变原来的基础上添加)


        */
        //    1
        //     let liList = document.getElementsByTagName('li')
        //     //是伪数组 HTMLCollection是html的集合 有数组下标 有length 没有数组的方法
        //     console.log(liList)
        //     console.log([...liList]);

        let arr1 = [1, 2, 3]
        let arr2 = [4, 5, 6]
        let arr = [7, 8, 9]
        //合并两个数组方法concat()
        let arr3 = arr1.concat(arr2)
        console.log(arr3)

        // 扩展运算符... 多个数组的合并
        let arr4 = [...arr1, ...arr2, ...arr]
        console.log(arr4);


        // 扩展运算符... 多个对象的合并
        let obj1 = {
            a: 1,
            b: 2,
        }
        let obj2 = {
            c: 3,
            d: 4,
        }
        let obj3 = {
            ...obj1,
            ...obj2
        }
        console.log(obj3);



        let arr10 = [0, 1, 2, 3, 4, ]
        let arr11 = arr10 // 引用,不叫复制
        arr11.push(99)
        console.log(arr10); //得到 [0,1,2,3,4,99]

        // 扩展运算符 数组的复制
        let arr20 = [0, 1, 2, 3, 4, ]
        let arr21 = [...arr20] //复制数组
        arr21.push(88)
        console.log(arr20); // 得到 [0,1,2,3,4]

        let obj4 = {
            name: 'Rose',
            age: 22
            
        }
        let obj5 = {...obj4 ,author: 'Mui'} //复制对象
        console.log(obj5); // 得到 { name: 'Rose', age: 22 ,author: "Mui"}
        obj5.age=18
        console.log(obj4); // 得到 22  不变
    </script>

</body>

</html>